<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
        }
        #myCanvas{
            background-image: url("img/1.jpg");
            background-repeat: no-repeat;
            background-size: 500px 500px;
        }


    </style>
</head>
<body>

<canvas id="myCanvas" width="500" height="500"></canvas>

</body>
<script type="text/javascript">
    window.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        var painting = myCanvas.getContext('2d');

        //目标图像 = 您已经放置在画布上的绘图
        painting.beginPath();
        painting.fillStyle = 'yellow';
        painting.fillRect(0,0,500,500);

        //划分源图像与目标图像
        painting.globalCompositeOperation = 'destination-out';


        //源图像 = 您打算放置到画布上的绘图
        myCanvas.onmousedown = function (event) {
            painting.beginPath();

            painting.arc(event.clientX-myCanvas.offsetLeft,event.clientY-myCanvas.offsetTop,20,0,2*Math.PI,false);
            painting.fill();

            document.onmousemove = function (event) {
                painting.beginPath();

                painting.arc(event.clientX-myCanvas.offsetLeft,event.clientY-myCanvas.offsetTop,20,0,2*Math.PI,false);
                painting.fill();

            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
            return false;
        };





    }
</script>
</html>